import React from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { cn } from '@/lib/utils';

interface ConfirmDialogProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  title: string;
  message: string;
  type?: 'danger' | 'warning' | 'info' | 'success';
  confirmText?: string;
  cancelText?: string;
  showIcon?: boolean;
}

export default function ConfirmDialog({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  type = 'info',
  confirmText = '确认',
  cancelText = '取消',
  showIcon = true
}: ConfirmDialogProps) {
  console.log('ConfirmDialog 渲染，isOpen:', isOpen); // 调试信息
  
  const handleConfirm = () => {
    console.log('ConfirmDialog handleConfirm 被调用'); // 调试信息
    onConfirm();
  };

  const getIconAndColors = () => {
    switch (type) {
      case 'danger':
        return {
          icon: 'fa-solid fa-exclamation-triangle',
          iconColor: 'text-red-500',
          bgColor: 'bg-red-50 dark:bg-red-900/20',
          borderColor: 'border-red-200 dark:border-red-800',
          buttonColor: 'bg-red-500 hover:bg-red-600 text-white',
          titleColor: 'text-red-800 dark:text-red-200'
        };
      case 'warning':
        return {
          icon: 'fa-solid fa-exclamation-circle',
          iconColor: 'text-yellow-500',
          bgColor: 'bg-yellow-50 dark:bg-yellow-900/20',
          borderColor: 'border-yellow-200 dark:border-yellow-800',
          buttonColor: 'bg-yellow-500 hover:bg-yellow-600 text-white',
          titleColor: 'text-yellow-800 dark:text-yellow-200'
        };
      case 'success':
        return {
          icon: 'fa-solid fa-check-circle',
          iconColor: 'text-green-500',
          bgColor: 'bg-green-50 dark:bg-green-900/20',
          borderColor: 'border-green-200 dark:border-green-800',
          buttonColor: 'bg-green-500 hover:bg-green-600 text-white',
          titleColor: 'text-green-800 dark:text-green-200'
        };
      default:
        return {
          icon: 'fa-solid fa-info-circle',
          iconColor: 'text-blue-500',
          bgColor: 'bg-blue-50 dark:bg-blue-900/20',
          borderColor: 'border-blue-200 dark:border-blue-800',
          buttonColor: 'bg-blue-500 hover:bg-blue-600 text-white',
          titleColor: 'text-blue-800 dark:text-blue-200'
        };
    }
  };

  const { icon, iconColor, bgColor, borderColor, buttonColor, titleColor } = getIconAndColors();

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* 背景遮罩 */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50"
            onClick={() => {
              console.log('ConfirmDialog 背景遮罩被点击'); // 调试信息
              onClose();
            }}
          />
          
          {/* 对话框 */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95, y: 20 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.95, y: 20 }}
            transition={{ type: "spring", damping: 25, stiffness: 300 }}
            className="fixed inset-0 z-50 flex items-center justify-center p-4"
            style={{ zIndex: 9999 }}
            onClick={(e) => e.stopPropagation()}
          >
            <div 
              className={cn(
                "relative rounded-xl shadow-2xl border backdrop-blur-md overflow-hidden w-full max-w-md",
                bgColor,
                borderColor
              )}
              onClick={(e) => e.stopPropagation()}
            >
              {/* 头部 */}
              <div className="flex items-center p-6 border-b border-gray-200 dark:border-gray-700">
                {showIcon && (
                  <div className={cn("mr-4 text-2xl", iconColor)}>
                    <i className={icon}></i>
                  </div>
                )}
                <h3 className={cn("text-lg font-semibold", titleColor)}>
                  {title}
                </h3>
              </div>

              {/* 内容 */}
              <div className="p-6">
                <p className="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-line">
                  {message}
                </p>
              </div>

              {/* 按钮 */}
              <div className="flex gap-3 p-6 pt-0">
                <button
                  onClick={() => {
                    console.log('ConfirmDialog 取消按钮被点击'); // 调试信息
                    onClose();
                  }}
                  className="flex-1 px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
                >
                  {cancelText}
                </button>
                <button
                  onClick={handleConfirm}
                  className={cn(
                    "flex-1 px-4 py-2.5 rounded-lg transition-colors font-medium",
                    buttonColor
                  )}
                >
                  {confirmText}
                </button>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </AnimatePresence>
  );
} 